<template>
  <div class="app-container">
    <el-card>
      <el-form ref="elForm" :model="formData" :rules="rules" label-width="110px">
        <el-row>
          <el-col :lg="12" :xl="8">
            <el-form-item label="快递名称：" prop="name">
              <el-input v-model.trim="formData.name" placeholder="请输入快递公司名称（2-10）" />
            </el-form-item>
            <el-form-item label="快递编号：" prop="code">
              <el-input v-model="formData.code" placeholder="请输入快递公司编码（1-20）" />
            </el-form-item>
            <el-form-item label="排序值：" prop="sort">
              <el-input v-model="formData.sort" placeholder="请输入排序值（1-9999）" />
            </el-form-item>

            <el-form-item label="是否启用：">
              <el-radio-group v-model="formData.showOrNot">
                <el-radio v-for="(item, index) in IS_STATUS" :key="index" :label="item.value">{{
                  item.label
                }}</el-radio>
              </el-radio-group>
            </el-form-item>

            <el-form-item class="text-center">
              <el-button @click="resetForm">取消</el-button>
              <el-button type="primary" @click="submitForm">保存</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import _ from 'lodash'
import { IS_STATUS } from '@/enum'
import { REGEX_SORT } from '@/utils/validate'
export default {
  name: 'AddTemplate',
  components: {},
  props: {},
  data() {
    return {
      formData: {
        code: '',
        name: '',
        sort: 99,
        showOrNot: true
      },
      rules: {
        name: [
          {
            required: true,
            message: '请输入快递公司名称',
            trigger: 'blur'
          },
          {
            min: 2,
            max: 20,
            message: '快递公司名称在2-20字之内',
            trigger: 'blur'
          }
        ],
        code: [
          {
            required: true,
            message: '请输入快递编号',
            trigger: 'blur'
          },
          {
            min: 1,
            max: 20,
            message: '快递编号在1-20之间',
            trigger: 'blur'
          },
          {
            pattern: /^[A-Za-z0-9]+$/,
            message: '1-20字符，只能输入数字及英文符号',
            trigger: 'blur'
          }
        ],
        sort: [
          {
            required: true,
            message: '请输入排序值',
            trigger: 'blur'
          },
          {
            pattern: REGEX_SORT,
            message: '排序值在1-9999之间'
          }
        ]
      }
    }
  },
  computed: {
    IS_STATUS() {
      return IS_STATUS
    },
    id() {
      return this.$route.query?.id
    }
  },
  created() {
    this.getExpressCompanyDetail()
  },
  methods: {
    // 获取快递公司详情
    async getExpressCompanyDetail() {
      if (!this.id) return false
      const { data } = await this.$http.express.companyApi.getExpressCompanyDetail(this.id)
      for (const key in data) {
        this.formData[key] = data[key]
      }
    },
    // 新增快递公司
    addExpressCompany: _.debounce(async function () {
      const params = {
        ...this.formData
      }
      const { status, msg } = await this.$http.express.companyApi.addExpressCompany(params)
      if (status === 200) {
        this.$message.success('新增成功！')
        this.$router.back(-1)
      } else {
        this.$message.error(msg)
      }
    }, 200),
    // 编辑快递公司
    updateExpressCompany: _.debounce(async function () {
      const params = {
        id: this.id,
        ...this.formData
      }
      const { status, msg } = await this.$http.express.companyApi.updateExpressCompany(params)
      if (status === 200) {
        this.$message.success('编辑成功！')
        this.$router.back(-1)
      } else {
        this.$message.error(msg)
      }
    }, 200),
    // 提交
    submitForm() {
      this.$refs['elForm'].validate(valid => {
        if (!valid) return
        if (this.id) {
          this.updateExpressCompany()
        } else {
          this.addExpressCompany()
        }
      })
    },
    // 重置表单
    resetForm() {
      this.$refs['elForm'].resetFields()
      this.$router.back(-1)
    }
  }
}
</script>

<style lang="scss" scoped></style>
